<template>
  <div class="selectTopic">
     <el-table
        :data="dataShows"
        :header-cell-style="{background:'#eef1f6',color:'#606266'}"
        style="width: 100%">
        <el-table-column
          :show-overflow-tooltip="true"
          prop="college"
          label="学院"
          align="center"
          >
        </el-table-column>
        <el-table-column
          prop="topicClass"
          label="班别"
          align="center"
          width="200">
        </el-table-column>
        <el-table-column
          prop="topicTitle"
          label="题目"
          align="center"
          width="200">
        </el-table-column>
        <el-table-column
          prop="jsName"
          label="老师"
          align="center"
          >
        </el-table-column>
        <el-table-column
          label="选题情况"
          align="center"
          >
          <template slot-scope="scope">
            <div v-show="scope.row.topicSelect === '1'" style="color: red;font-weight: 900">已选</div>
            <div v-show="scope.row.topicSelect === '0'" style="color: green;font-weight: 900">未选</div>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button
              size="mini"
              @click="handleSelect(scope.row, 1)">选择</el-button>
            <el-button
              size="mini"
              type="danger"
              @click="handleCancel(scope.row, 0)">不选</el-button>
          </template>
        </el-table-column>
      </el-table>

       <!-- 分页按钮 -->
      <div class="pagingTool">
        <el-pagination background @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="current" 
                    :page-size="pageSize"
                    layout="prev, pager, next, jumper, slot, total" 
                    :total="total" class="pageInfo">
            <span id="sure">确定</span>
        </el-pagination>
      </div>
  </div>
</template>

<script>
import { axiosRequest } from "@/utils/axiosRequest";
export default {
  data() {
    var userInfo = JSON.parse(window.sessionStorage.getItem('userInfo')).user;
      return {
        listData: userInfo, //当前登录的信息
        tableData: [],
         // 分页
        current:1,      //默认显示第一页数据
        pageSize:8,     //每页显示多少条数据
        total:0,        //一共多少条后台数据
        dataShows: [],   //当前显示的数据
        pageNum: 1,     //共有几页
        totalPage: [],  //所有页面的数据
      }
  },

  methods: {
    // 选择题目
      handleSelect( row, i ) {
        var self = this;
        var checkoutFlag = true;
        const str = self.listData.empClass;
        const numSign = self.listData.loginCode;
        const tableArrays = self.dataShows;
        // 判断学生只能选择一个题目
        tableArrays.filter((e) => {
          if(e.stuNum === numSign){
            self.$alert('学生只能选择一个题目', '提示', {
              confirmButtonText: '确定',
              callback: () => {
                this.$message({
                  type: 'info',
                  message: `确定成功！！！`
                });
              },
            });
            checkoutFlag = false;
          } 
          return;
        });
        var newStr = str.replace("^[\u4E00-\u9FA5A-Za-z]+$");
        var newWord = row.topicClass.substr(0,2);
        if(newStr == newWord && checkoutFlag == true){
            if(row.topicSelect == 1){
              self.$message({
                  showClose: true,
                  message: '该题目已经被选择了！！！',
                  type: 'warning'
                });
                return;
            }else {
              row.stuNum = self.listData.loginCode;
              row.empClass = str;
              row.stuName = self.listData.empName;
              row.topicSelect = i;
              var newForm = row;
              this.$confirm('您确定选择该题目嘛?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
              }).then(() => {
                axiosRequest("post","/topicInfo/save",newForm).then((res) => {
                    if (res.data.code === 200) {
                        self.gettableList();
                        self.$message({
                          showClose: true,
                          message: '恭喜你，成功选择了该题目！！！',
                          type: 'success'
                        });
                    } else {
                        self.$message({
                          showClose: true,
                          message: '选题失败了，请求信息失败了！！！',
                          type: 'error'
                        });
                      }
                  });
              }).catch(() => {
                self.gettableList();
                this.$message({
                  type: 'info',
                  message: '已取消选择！'
                });          
              });
              
            }
        }else if(checkoutFlag == true){
            this.$message({
                showClose: true,
                message: '错了哦，不可以选择其他班别的题目',
                type: 'warning'
              });
        }
      },
    
    // 取消选题
      handleCancel(row, i) {
        var self = this;
        self.$confirm('此操作将取消选择该题目, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          row.stuNum = "";
          row.empClass = "";
          row.stuName = "";
          row.topicSelect = i;
          var newForm = row;
          axiosRequest("post","/topicInfo/save",newForm).then((res) => {
            if (res.data.code === 200) {
                self.gettableList();
                self.$message({
                  showClose: true,
                  message: '取消该选题成功！！！',
                  type: 'success'
                });
            } else {
                self.$message({
                  showClose: true,
                  message: '取消失败，请求信息失败了！！！',
                  type: 'error'
                });
              }
          });
        }).catch(() => {
          self.$message({
            type: 'info',
            message: '已撤销该操作'
          });          
        });
      },

      //每页显示
      handleSizeChange(val) {
        this.pageSize = val;
        this.current=1;
      },

      //显示页
      handleCurrentChange(val) {
        this.current = val;
        this.gettableList();
      },

      // 请求后台题目数据
      gettableList(){
        var self = this;
        var newDataArray = [];
        axiosRequest("get","/topicInfo/listAll",null).then((res) => {
            if (res.data.code === 200) {
                self.tableData = res.data.data;
                newDataArray = self.tableData.filter( (e) => { return e.college == self.listData.college });
                self.total = newDataArray.length;
                self.pageNum = Math.ceil(self.total / self.pageSize) || 1;
                for(let i = 0; i < self.pageNum; i++){
                  self.totalPage[i] = newDataArray.slice(self.pageSize * i, self.pageSize * (i + 1))
                }
                self.dataShows = self.totalPage[self.current - 1];
            } else {
                self.$message({
                  showClose: true,
                  message: '错了哦，请求信息失败了！！！',
                  type: 'error'
                });
              }
          });
      },
  },

  mounted: function() {
    var self = this;
    self.gettableList();
  },
}
</script>

<style lang="less" scoped>
.selectTopic {
  padding-left: 10px;
  position: relative;
}

.pagingTool{
  position: absolute;
  top: 458px;
}

#sure {
    border: 1px solid #DCDFE6;
    text-align: center;
    line-height: 25px;
    display: inline-block;
    margin: 0px 15px;
    cursor: pointer;
    width: 4%;
    border-radius: 3px;
}

</style>
